<template>
  <div id="issue_detail">
    <div class="issue-title">
      #{{ issue.id }} {{ issue.title }}
      <span class="issue-handler">
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><el-button type="text"><i class="el-icon-edit-outline"></i>修改状态</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text"><i class="el-icon-edit-outline"></i>指派给</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text"><i class="el-icon-edit-outline"></i>修改优先级</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text"><i class="el-icon-edit-outline"></i>进度</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text"><i class="el-icon-edit-outline"></i>编辑</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <div class="desc">{{ issue.desc }}</div>
    <div>
      <el-row :gutter="20">
        <el-col :span="10" class="span-table">
          <span class="lable">状态:</span>
          <el-tag size="mini">{{ status[issue.status] }}</el-tag>
        </el-col>
        <el-col :span="10" class="span-table">
          <span class="lable">优先级:</span>
          <el-tag size="mini" type="success">{{ priorities[issue.priority] }}</el-tag>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="10" class="span-table">
          <span class="lable">类型:</span>
          {{ types[issue.type] }}
        </el-col>
        <el-col :span="10" class="span-table">
          <span class="lable">指派给:</span>
          {{ users[issue.assigner_user_id]['name'] }}
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="10" class="span-table"><span class="lable">开始时间:</span>{{ issue.start_date }}</el-col>
        <el-col :span="10" class="span-table"><span class="lable">结束时间:</span>{{ issue.end_date }}</el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="10" class="span-table"><span class="lable">预估用时:</span>{{ issue.expect_hour }}小时</el-col>
        <el-col :span="10" class="span-table"><span class="lable">实际用时:</span>{{ issue.actual_hour }} 小时</el-col>
      </el-row>
    </div>
    <div class="activity-title">活动记录</div>
    <div v-for="log in logs" class="box">
      <div class="box-title"></div>
      <div class="box-body">{{ users[log.user_id]['name'] }} {{ log.content }}</div>
      <div class="box-footer">{{ log.operate_time }}</div>
    </div>
  </div>
</template>

<style type="text/css">
  * {
    font-size: 13px;
  }
  .issue-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .issue-handler {
    margin-left: 35px;
  }

  .pull-right {
    float: right;
  }

  .activity-title {
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 15px;
    border-bottom: 1px solid #DFDFDF;
  }

  .desc {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .span-table {
    margin-bottom: 10px;
  }
  .lable {
    margin-right: 10px;
  }
  .dropdown-link {
    color: #409EFF;
    cursor: pointer;
  }

</style>

<script>
export default {
  name: 'home',
  data () {
    return {
      issue: '',
      logs: [],
      status: [],
      types: [],
      envs: [],
      priorities: [],
      users: []
    }
  },
  methods: {
  },
  mounted: function () {
    const page = this
    const id = this.$route.query.id
    const projectId = this.$route.query.project_id
    window.axios.get('api/issue/detail?id=' + id + '&project_id=' + projectId, {
    })
    .then(function (response) {
      page.issue = response.data.issue
      page.logs = response.data.logs
      page.envs = response.data.envs
      page.status = response.data.status
      page.priorities = response.data.priorities
      page.types = response.data.types
      page.users = response.data.users
    })
    .catch(function (error) {
      console.log(error)
    })
  }

}
</script>
